<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				font-size: 14px;
				line-height: 20px;
			}
			
			a {
				text-decoration: none;
				color: blue;
			}
			
			a:hover {
				color: red;
			}
			
			img {
				border: 0;
				vertical-align: middle;
			}
			
			.treeStyle {
				list-style: none;
				display:none;
			}
		</style>
		<script type="text/javascript">
			function show(bookType) {
				//国列表是显示状态，则改为 隐藏状态
				//在dom操作中，获取了dom对象之后，可以通过style对象设置style中的样式属性值
				if(document.getElementById(bookType).style.display == 'block') {
					document.getElementById(bookType).style.display = 'none';
				} else {
					document.getElementById(bookType).style.display = 'block';
				}
			}
		</script>
	</head>

	<body>
		<b><img src="imgs/treetag.jpg">图书分类</b>
		<p>
			<a href="javascript:show('l&a')">&nbsp;&nbsp;&nbsp;&nbsp;<img src="imgs/treetag.jpg">文艺</a>
		</p>
		<ul id="l&a" class="treeStyle">
			<li><img src="imgs/treetag.jpg">文学</li>
			<li><img src="imgs/treetag.jpg">传记</li>
			<li><img src="imgs/treetag.jpg">艺术</li>
			<li><img src="imgs/treetag.jpg">摄影</li>
		</ul>
		<p>
			<a href="javascript:show('succ')">&nbsp;&nbsp;&nbsp;&nbsp;<img src="imgs/treetag.jpg">励志/成功</a>
		</p>
		<ul id="succ" class="treeStyle">
			<li><img src="imgs/treetag.jpg">职场</li>
			<li><img src="imgs/treetag.jpg">成功</li>
			<li><img src="imgs/treetag.jpg">人际</li>
			<li><img src="imgs/treetag.jpg">心灵修养</li>
		</ul>
	</body>

</html>